﻿@model Umbraco.Cms.Web.Model.BackOffice.Editors.InsertFieldModel
@using Umbraco.Framework.Persistence.Model.Constants;
@{
    Layout = "../Shared/_ModalLayout.cshtml";

    Html.RequiresJs("Umbraco.Editors/Dialogs/InsertFieldEditor.js", "Scripts");
} 
@section Head {
    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                Umbraco.Editors.InsertFieldEditor.getInstance().init({
                    availableFields: @Html.ToJsonString(@Model.AvailableFields),
                    availableCasingTypes: @Html.ToJsonString(@Model.AvailableCasingTypes),
                    availableEncodingTypes: @Html.ToJsonString(@Model.AvailableEncodingTypes)
                });
            });
        })(jQuery);
    </script>
}

<div class="property-pane clearfix">
    <div class="property-editor clearfix">
        <div class="property-editor-label">Field</div>
        <div class="property-editor-control">
            <select data-bind="options: availableFields, value: selectedField"></select>
            <small>The alias of the field to display</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">
            Alternative Field
        </div>
        <div class="property-editor-control">
            <select data-bind="options: availableFields, optionsCaption: 'Choose...', value: selectedAlternativeField"></select>
            <small>The alias of a field to display if the primary field is unavailable</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Alternative Text</div>
        <div class="property-editor-control">
            <input type="text" data-bind="value: alternativeText" />
            <small>The text value to display if either of the two fields above are unavailable</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Recursive</div>
        <div class="property-editor-control">
            <input type="checkbox" data-bind="checked: recursive" />
            <small>Indicate whether to iterate through the pages ancestors looking for a field value, if the field value is unavailable on the current page</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Insert Before</div>
        <div class="property-editor-control">
            <input type="text" data-bind="value: insertBefore" />
            <small>Text/Html to be inserted before the field value</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Insert After</div>
        <div class="property-editor-control">
            <input type="text" data-bind="value: insertAfter" />
            <small>Text/Html to be inserted after the field value</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Casing</div>
        <div class="property-editor-control">
            <input type="radio" name="casing" data-bind="checked: selectedCasingType" value="Unchanged" /> Unchanged &nbsp; 
            <input type="radio" name="casing" data-bind="checked: selectedCasingType" value="Lower" /> Lower &nbsp; 
            <input type="radio" name="casing" data-bind="checked: selectedCasingType" value="Upper" /> Upper &nbsp; 
            <input type="radio" name="casing" data-bind="checked: selectedCasingType" value="Upper" /> Title
            <small style="padding-top: 2px;">Force the field value into a specific casing format</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Encoding</div>
        <div class="property-editor-control">
            <input type="radio" name="encoding" data-bind="checked: selectedEncodingType" value="Unchanged" /> Unchanged &nbsp; 
            <input type="radio" name="encoding" data-bind="checked: selectedEncodingType" value="Url" /> Url &nbsp; 
            <input type="radio" name="encoding" data-bind="checked: selectedEncodingType" value="Html" /> Html 
            <small style="padding-top: 2px;">Encode special characters in the field value into a safe format</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Convert Line Breaks</div>
        <div class="property-editor-control">
            <input type="checkbox" data-bind="checked: convertLineBreaks" />
            <small>Indicate whether to replace line breaks with a html &lt;br /&gt;</small>
        </div>
    </div>
    <div class="property-editor clearfix">
        <div class="property-editor-label">Remove Paragraph Tags</div>
        <div class="property-editor-control">
            <input type="checkbox" data-bind="checked: removeParagraphTags" />
            <small>Indicate whether to remove surrounding paragraph tags from the field value</small>
        </div>
    </div>
</div>
<button id="btnInsertSectionDefinition" data-bind="click: save">Insert</button> or <a id="btnCancelInsertSectionDefinition" href="#" class="cancel" data-bind="click: cancel">Cancel</a>
